import { message } from "antd";
import { useCallback, useEffect, useState } from "react";
import { getReportOperateNote } from "../../api";

/**
 * 日志
 * @author lijj
 */
const LogData = () => {
    const [datalist, setDataList] = useState<{operateTime:string,operateUser:string,title:string}[]>([])
    //getReportOperateNote
    const listFun = useCallback(async () => {
        const { code, msg, data } = await getReportOperateNote() as { 
            code: number, 
            msg: string, 
            data: { operateTime:string,operateUser:string,title:string}[] };
        if (code === 20000) {
            setDataList(data)
        } else {
            message.error(msg);
        }
    }, [])
    useEffect(() => {
        listFun()
    }, [listFun])
    return (
        <div className="work-bottom-right">
            <div className="log-title">
                操作日志
            </div>
            <div className="log-content" >
                {datalist.map((log, index) => (
                        <div className="log-item" key={index}>
                            <div className="log-item-left">
                            {index === 0 ? (
                                    <div className="circle"></div>
                                ) : index === datalist.length - 1 ? (
                                    <div className="gray-list"></div> // 最后一项使用 gray-list
                                ) : (
                                    <div className="gray"></div> // 其他项使用 gray
                                )}
                            </div>
                            <div className="log-item-right">
                                <div className="log-item-title">
                                    {log.operateUser} {log.title}
                                </div>
                                <div className="log-item-time">
                                    {log.operateTime}
                                </div>
                            </div>
                        </div>
                ))}
            </div>
        </div>
    )
}

export default LogData